{% extends 'base.html' %}
{% block title %}
    用户注册
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <style>
        #content {
            width: 40%;
            margin-left: 30%;
            height: 400px;
            padding: 20px;
            background-color: #c0d592;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            {#box-shadow: 2px 2px 2px #000000;#}
        }
    </style>
{% endblock %}

{% block content %}
    <div id="content">
        <div id="contentForm1">
            <br>
{#            <form action="{% url 'user:regist' %}" method="post">#}
                {% csrf_token %}
                <div class="form-group">
                    <div style="text-align: center"><b>注册中心</b></div>
                    <br>
                </div>
                <div class="form-group">
                    <input id="regist-input-username" type="text" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-8 col-sm-8" >
                            <input id="regist-input-phone-number" type="text" class="form-control" placeholder="输入手机号"/>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <input id="regist-send-sms-btn" type="button" class="btn btn-primary" style="width: 100%" value="发送验证码" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <input id="regist-input-sms-code" class="form-control" type="text" placeholder="4位验证码" name="regist-sms-code" required="">
                </div>
                <div class="form-group">
                    <input id="regist-input-password" class="form-control" type="password" placeholder="请输入密码" name="regist-password" required="">
                </div>
                <div class="form-group">
                    <input id="regist-input-password1" class="form-control" type="password" placeholder="请确认密码" name="regist-password1" required="">
                </div>
                <br>
                <div class="form-group row">
                    <div class="col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2">
                        <input id="regist-commit-btn" type="button" class="btn btn-primary" style="width: 100%" value="提交注册"/>
                    </div>
                </div>
{#            </form>#}
        </div>
        <script type="text/javascript">
            $("#regist-send-sms-btn").click(function(){
                var phone_number = $("#regist-input-phone-number").val();
                for (var i = 0; i < phone_number.length; ++i) {
                    if (phone_number[i] < '0' || phone_number[i] > '9') {
                        alert("手机号只能由11位数字组成~");
                        return;
                    }
                }

                if (phone_number.length !== 11) {
                    alert("手机号只能由11位数字组成~");
                    return;
                }

                $.ajax({
                    type:'POST',
                    data:{'phone_number': phone_number, csrfmiddlewaretoken:'{{ csrf_token }}'},
                    url:'{% url 'user:send_code' %}',
                    datatype: JSON,      //希望返回Json格式的数据
                    async: false,
                    success:function (rsp) {
                        console.log(rsp);
                        if (rsp.code !== 0) {
                            alert(rsp.msg);
                            return false;
                        }
                        else {
                            var baseTime = 90;
                            var tryTimes = 1;
                            var waitTime = baseTime * tryTimes;
                            var send_sms_btn = $("#regist-send-sms-btn");
                            var intervalId = window.setInterval(function () {
                                 if (waitTime <= 0){
                                     clearInterval(intervalId);
                                     send_sms_btn.val('发送验证码');
                                     tryTimes += 1
                                     return ;
                                 }
                                 send_sms_btn.val(waitTime + 's');
                                 waitTime -= 1;
                            }, 1000);
                        }
                    },
                    error:function () {
                        console.log('ajax刷新分页数据失败！');
                    }
                });
            });
            $("#regist-commit-btn").click(function(){
                var phone_number = $("#regist-input-phone-number").val();
                var sms_code = $("#regist-input-sms-code").val();
                var password = $("#regist-input-password").val();
                var username = $("#regist-input-username").val();
                $.ajax({
                    type:'POST',
                    data: {
                        "username": username,
                        "phone_number": phone_number,
                        "password": password,
                        "sms_code": sms_code,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    url:'{% url 'user:regist' %}',
                    datatype:JSON,      //希望返回Json格式的数据
                    success:function (data) {
                        if (data.status === "error") {
                            alert(data.msg);
                        } else {
                            toastr.success("注册成功，跳转登录页面登录~");
                        }
                    },
                    error:function () {
                        console.log('ajax刷新分页数据失败！');
                    }
                });
            });
        </script>
    </div>
{% endblock %}

{% block my_js %}
    <script>
        window.onload = function () {
            document.getElementById('regist-input-password').onchange = validatePassword;
            document.getElementById('regist-input-password1').onchange = validatePassword;
            //document.getElementById('send_code').textContent = "60s";
        };

        function validatePassword() {
            var pass = document.getElementById("password").value;
            var pass1 = document.getElementById("password1").value;
            if (pass != pass1)
                document.getElementById('password1').setCustomValidity("输入两次密码不一致");
            else
                document.getElementById('password1').setCustomValidity("");
        }
    </script>
{% endblock %}